<template>
  <view class="page-wrapper">
    <view class="item" v-for="item in list" :key="item.name">
      <view class="name">{{item.name}}</view>
      <view class="switch">
        <u-switch v-model="item.flag" :activeValue="true" :inactiveValue="false" asyncChange @change="asyncChange(item)"
          inactiveColor="#E6E6E6" activeColor="#CF1A1B" size="34">
        </u-switch>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        list: [{
            name: "下载更新",
            flag: true
          },
          {
            name: "优惠活动",
            flag: true
          },
          {
            name: "系统消息",
            flag: true
          },
          {
            name: "通知公告",
            flag: true
          },
          {
            name: "时间设置(晚10点到8点不接受通知)",
            flag: true
          },
        ],
      }
    },
    computed: {
      ...mapGetters('user', ['getUserInfo']),
    },

    methods: {
      asyncChange(item) {
        let flag = item.flag ? 'N' : 'Y'
        switch (item.name) {
          case '下载更新':
            this.initData('appUpdateFlag', flag)
            break;
          case '优惠活动':
            this.initData('actPushFlag', flag)
            break;
          case '系统消息':
            this.initData('systemPushFlag', flag)
            break;
          case '通知公告':
            this.initData('noticePushFlag', flag)
            break;
          case '时间设置(晚10点到8点不接受通知)':
            this.initData('nightPushFlag', flag)
            break;
          default:
            break;
        }
      },
      async getStatus() {
        try {
          const res = await this.$request({
            method: 'GET',
            url: '/user-center/user/accountSetting/info',
            data: {
              userId: this.getUserInfo.id
            }
          })
          let data = res.datas
          this.list = []
          this.list.push({
            name: "下载更新",
            flag: data.appUpdateFlag === 'Y' ? true : false
          }, {
            name: "优惠活动",
            flag: data.actPushFlag === 'Y' ? true : false
          }, {
            name: "系统消息",
            flag: data.systemPushFlag === 'Y' ? true : false
          }, {
            name: "通知公告",
            flag: data.noticePushFlag === 'Y' ? true : false
          }, {
            name: "时间设置(晚10点到8点不接受通知)",
            flag: data.nightPushFlag === 'Y' ? true : false
          }, )
        } catch (e) {
          console.log('获取消息推送设置信息失败!')
        }
      },
      async initData(type, flag) {
        let data = {}
        data[type] = flag
        try {
          const res = await this.$request({
            url: '/user-center/user/accountSetting/pushSwitch',
            data: data
          })
          if(res.respCode === 200) {
            this.getStatus()
          }
        } catch (e) {
          console.log('获取消息推送设置信息失败!')
        }
      }
    },
    onReady() {
      this.getStatus()
    }
  }
</script>

<style lang="scss" scoped>
  .item {
    padding: 0 32rpx;
    background-color: #FFFFFF;
    height: 130rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #F6F6F7;
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);

    &:last-child {
      border-bottom: none;
    }
  }
</style>